<template>
	<bro-container @click-tabbar="clickTabbar" tabbar="show" :tabbar-list="tabbar" :scroll="false" title="测试测试测试测试测试测试测试测试" navbar="show">
		<template>
			<bro-container-item :visbole="currentPage === 'home-page'"><home-page ref="home-page"></home-page></bro-container-item>
			<bro-container-item :visbole="currentPage === 'clock-page'"><clock-page ref="clock-page"></clock-page></bro-container-item>
			<bro-container-item :visbole="currentPage === 'test-page'"><test-page ref="test-page"></test-page></bro-container-item>
			<bro-container-item :visbole="currentPage === 'mine-page'"><mine-page ref="mine-page"></mine-page></bro-container-item>
		</template>
	</bro-container>
</template>

<script>
import { HomePage } from '@/common/mixin/page.js';

import homePage from './home/home.vue';
import clockPage from './clock/clock.vue';
import testPage from './test/test.vue';
import minePage from './mine/mine.vue';

export default {
	mixins: [HomePage],
	components: {
		homePage,
		clockPage,
		testPage,
		minePage
	},
	//...Object.fromEntries(pages.map(item => [item.name, item.page]))
	data() {
		return {
			currentPage: 'home-page',
			tabbar: {
				list: [
					{
						name: 'home-page',
						iconPath: '',
						selectedIconPath: '',
						// pagePath: "pages/index/index",
						text: '首页'
					},
					{
						name: 'clock-page',
						iconPath: '',
						selectedIconPath: '',
						// pagePath: "pages/index/index",
						text: '打卡'
					},
					{
						name: 'test-page',
						iconPath: '',
						selectedIconPath: '',
						// pagePath: "pages/index/index",
						text: '测评'
					},
					{
						name: 'mine-page',
						iconPath: '',
						selectedIconPath: '',
						// pagePath: "pages/logs/logs",
						text: '我的'
					}
				]
			}
			// var_page_init:false,//页面加载完
		};
	},
	methods: {
		clickTabbar(item) {
			this.currentPage = item.name;
		}
	}
};
</script>

<style lang="scss" scoped>
.tabbar {
	background-color: #00ffff;
	height: 100%;
	display: flex;
	justify-content: space-around;
	.tabbar-item {
		width: 250rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
